<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/static/代码CSS/Home_css.css">
    <link rel="stylesheet" href="/static/代码CSS/cart.css">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/jquery-ui-1.12.1/external/jquery/jquery.js">
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <script src="/static/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
</head>
<body>
<div class="body_meau">
    <div class="header_meau">
        <div class="header_meau_logo left">
            <div class="header_meau_logo_image">
                <i class="fa fa-cart-arrow-down fa-3x" aria-hidden="true"></i>
            </div>
            <div class="header_meau_logo_right">
                <b><a class="header_meau_logo_right_font" href="{% url 'person_info' %}">用户中心</a></b>
                <b><a class="header_meau_logo_right_font" href="{% url 'usercart' %}">我的订单</a></b>
                <b><a class="header_meau_logo_right_font">客户服务</a></b>
                <b><a class="header_meau_logo_right_font" href="{% url 'Home' %}">网站导航</a></b>
            </div>
        </div>
        <div class="header_meau_Landing_search">
            <input type="text" style="width: 371px; height: 29px; position: relative; top: 8px;left: 79px;"/>

            <div style=" position: relative;width: 50px;height:44px;float: right; top: 7px;">
                <!--<i class="fa fa-search fa-2x" aria-hidden="true" ></i>-->
                <button style=" position: relative;width: 50px;height:37px;left: 64px;top: 2px; cursor: pointer;">
                    <i class="fa fa-search fa-1x" aria-hidden="true"></i>
                </button>
            </div>

        </div>
        <div class="header_meau_Landing right">
            <div class="header_meau_Landing icon">
                <i class="fa fa-id-card-o fa-2x" aria-hidden="true"></i>
            </div>

            <div class="body_usinfo">
                <!--
                    作者：1045077189@qq.com
                    时间：2020-03-03
                描述：插入登录信息
                -->
                {% if username %}
                    <i class="fa fa-id-badge" aria-hidden="true"></i>
                    <a style="position: absolute;top: 17px;font-size: 15px;left: 0;"><span>{{ uesrname1 }}</span></a>

                {% else %}
                    <a style="position: absolute;top: 17px;font-size: 15px;left: 0;"><span>用户未登录</span>
                        <i class="fa fa-id-badge" aria-hidden="true"></i></a>
                {% endif %}
                <a href="/quite/">退出登录</a>
            </div>

            <div class="header_meau_Landing landing1">
                <a href="{% url 'login' %}">
                    <button style="position: relative;top: 9px; font-size: 14px;" class="btn btn-success" type="submit">
                        登录
                    </button>
                </a>
                &nbsp; &nbsp;
                <a href="{% url 'regiter' %}">
                    <button style="position: relative;top: 9px; font-size: 14px;" class="btn btn-group" type="submit">
                        注册
                    </button>
                </a>
            </div>
            <div class="header_meau_Landing send">
                <a style="position: absolute;top: 6px; font-size: 19px;padding: 0px 15px 0px 15px; left: 25px;">意见箱</a>
            </div>
        </div>
        <div class="header_meau_Landing set ">
            <i class="fa fa-cogs fa-spin" aria-hidden="true" style="padding-top: 15px;"></i>
        </div>
    </div>
</div>

<div class="body_cart_left_line"></div>
<div class="body_cart_right_line"></div>
<div class="body_cart">
    <div class="body_cart_title"><h2>{{ username }}的购物车</h2></div>
    <div class="body_cart_address">
        <div class="user">
            <h3>收货信息栏</h3>
        </div>
        <div class="user_title_line"></div>
        <div class="user_address_info">
            <br>
            <h4>收获人姓名: </h4>
            <h4>联系人电话: </h4>
            <h4>收货地址: </h4>
        </div>

        <div class="message">
            <span>商家留言板</span>
            <p></p>
            <input type="text" class="form-control but" placeholder="请输入内容"/>
            <div class="submit">
                <button class="btn btn-success">提交</button>
            </div>
        </div>

        <div class="message_board"></div>
    </div>
    <div class="body_cart_info">
        <table class="table table-hover">

            <tr>
                <th>序号</th>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>编辑</th>

            </tr>

            {% for cart in carts %}
                <tr cartsid="{{ cart.id }}">
                    <td>{{ forloop.counter }}</td>
                    <td><img src="{{ MEDIA_URL }}{{ cart.c_goods.img }}" alt="50*50" class="cart_Image"></td>
                    <td>{{ cart.c_goods.goods_name }}</td>
                    <td>{{ cart.c_goods.goods_price }}</td>
                    <td>
                        <section>
                            <button class="sub" type="button">-</button>
                            <em>{{ cart.c_goods_num }}</em>{{ meg }}
                            <button class="add" type="button">+</button>
                        </section>
                    </td>
                    <td cartid="{{ cart.id }}">
                        <div class="CH">
                            {% if cart.c_is_select %}
                                <button class="checkbox">
                                    <span>✔</span>
                                </button>
                            {% else %}
                                <button class="checkbox">
                                    <span>-</span>
                                </button>
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        <div class="GW">
                                {% if c_is_select %}
                                    已全选&nbsp; &nbsp;
                                    <button type="button" class="all_select">✔</button>
                                {% else %}
                                    未全选&nbsp; &nbsp;
                                    <button type="button" class="all_select">-</button>
                                {% endif %}
                        </div>
                    </td>
                </tr>
            {% endfor %}
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td style="color: red; font-size: 20px;" class="success">总价:{{ total_price }}元</td>
                <td style="color: red; font-size: 20px;" class="success">件数:{{ count_add }}</td>
                <td style="display: block" class="success">
                    <button class="btn btn-danger" id="pay">购买</button>
                </td>
            </tr>
        </table>
        <div class="hgw">

        </div>
    </div>
</div>
<script>
    $(function () {
        $(".checkbox").click(function () {
            console.log("chang state");
            var $checkbox = $(this);
            var $tr = $checkbox.parents("tr");
            var cartsid = $tr.attr("cartsid");

            $.getJSON('/Changecarts/', {'cartsid': cartsid}, function (data) {
                console.log(data);
                if (data['status'] === 200) {
                    $("#total_price").html(data['total_price']);
                    if (data['c_is_select']) {
                        $checkbox.find("span").html("✔");
                    } else {
                        $checkbox.find("span").html("-");
                    }
                }
            })
        });
        $(".sub").click(function () {
            var $sub = $(this);
            var $tr = $sub.parents("tr");
            var cartsid = $tr.attr("cartsid");
            window.alert("减少成功,请刷新页面");
            location.replace(location.href);
            $.getJSON("/subshoppings/", {'cartsid': cartsid}, function (data) {
                console.log(data);
                if (data[status] === 200) {
                    $("#total_price").html(data['total_price']);
                    if (data['c_goods_num'] > 0) {
                        var $em = $sub.next("em");
                        $em.html(data['c_goods_num']);

                    } else {
                        $tr.remove()
                    }
                }
            })


        });
        $(".add").click(function () {
            var $add = $(this);
            var $tr = $add.parents("tr");
            var cartsid = $tr.attr("cartsid");
            window.alert("添加成功,请刷新页面");
            location.replace(location.href);
            $.getJSON("/addshoppings/", {'cartsid': cartsid}, function (data) {
                console.log(data);
                if (data[status] === 200) {
                    $("#total_price").html(data['total_price']);
                    if (data['c_goods_num'] > 0) {
                        var $em = $sub.next("em");
                        $em.html(data['c_goods_num']);


                    } else {
                        window.alert("没有库存");
                    }
                }
            })


        });
        $(".all_select").click(function () {
            var $all_select = $(this);
            var select_list = [];
            var unselect_list = [];
            $(".CH").click(function () {
                var $CH = $(this);
                var cartid = $CH.parents("td").attr("cartid");
                if ($CH.find("button").html().trim()) {
                    select_list.push(cartid);
                } else {
                    unselect_list.push(cartid);
                }
            });
            if (unselect_list.length > 0) {
                $.getJSON("/allselect/", {'cart_list': unselect_list.join("#")}, function (data) {
                    console.log(data);
                })

            }
        })
    })
</script>
</body>
</html>